<template>
    <div>
        <Col v-bind="grid"
             v-for="(item, index) in colData"
             :key="index">
        <FormItem :label="`${item.label}：`"
                  :prop="item.name"
                  :label-for="item.name">
            <template v-if="item.type === 'input' && item.isRange">
                <Row>
                    <Col span="10">
                    <Input v-model="item.valueS"
                           :placeholder="item.placeholder"
                           :element-id="item.name">
                    <span v-if="item.prepend && item.prepend !== ''"
                          slot="prepend">{{item.prepend}}</span>
                    <span v-if="item.append && item.append !== ''"
                          slot="append">{{item.append}}</span>
                    </Input>
                    </Col>
                    <Col span="4"
                         class="qw-text-c">-</Col>
                    <Col span="10">
                    <Input v-model="item.valueE"
                           :placeholder="item.placeholder"
                           :element-id="item.name">
                    <span v-if="item.prepend && item.prepend !== ''"
                          slot="prepend">{{item.prepend}}</span>
                    <span v-if="item.append && item.append !== ''"
                          slot="append">{{item.append}}</span>
                    </Input>
                    </Col>
                </Row>
            </template>
            <template v-else-if="item.type === 'input'">
                <Input v-model="item.value"
                       :placeholder="item.placeholder"
                       :element-id="item.name" />
            </template>
            <template v-if="item.type === 'select'">
                <Select v-model="item.value"
                        :placeholder="item.placeholder"
                        :element-id="item.name"
                        :filterable="item.filterable"
                        :multiple="item.multiple">
                    <Option v-for="(selectItem, selectIndex) in item.selectList"
                            :key="selectIndex"
                            :value="selectItem.value">{{selectItem.label}}</Option>
                </Select>
            </template>
            <template v-if="item.type === 'selectTree'">
                <qw-select-tree :paramsInfo.sync="item"
                                @changeSelectTreeModel="handleChangeSelectTree"></qw-select-tree>
            </template>
            <template v-if="item.type === 'date'">
                <qw-data-picker :paramsInfo="item"></qw-data-picker>
            </template>
        </FormItem>
        </Col>
    </div>
</template>
<script>

    import qwDataPicker from '@/components/common/tableForm/comp/qwDatePicker';
    import qwSelectTree from '@/components/common/tableForm/comp/qwSelectTree';
    export default {
        components: { qwDataPicker, qwSelectTree },
        props: {
            grid: {
                type: Object
            },
            colData: {
                type: Array
            }
        },
        data () {
            return {
            }
        }
    }
</script>
